﻿<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <link rel="stylesheet" href="../plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="../plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/getParameter.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>

<body style="overflow: visible;">
<div id="frameContent" class="content-wrapper" style="margin-left:0px;height: 1200px" >
    <section class="content-header">
        <h1>菜单管理
            <small>菜单列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
        <!-- .box-body -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">角色 [{{role.name}}] 权限列表</h3>
            </div>
            <div class="box-body">
                <!-- 数据表格 -->
                <div class="table-box">
                    <!-- 树菜单 /-->
                    <ul id="treeDemo" class="ztree"></ul>
                    <!--工具栏-->
                    <div class="box-tools text-left">
                        <button type="button" class="btn bg-maroon" @click="submitCheckedNodes();">保存</button>
                        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    //获取授权的角色id
    let roleId = getUrlParam("roleId");
</script>
<script>
    new Vue({
        el:"#frameContent",
        data:{
            role:{},//角色对象
            //以下都是zTree树型控件需要的变量
            setting : {check: {enable: true},data: {simpleData: {enable: true}}},//树型控件相关设置信息
            zTreeObj:{}, //树型控件对象
            /*
             [
                {id:1,parentId:0,name:"平台系统管理",ctype:0,state:1,curl:"system",remark:"xxx"},
                {id:101,parentId:1,name:"部门管理",ctype:1,state:1,curl:"dept.html",remark:"xxx"},
                {id:102,parentId:1,name:"用户管理",ctype:1,state:1,curl:"user.html",remark:"xxx"},
             ]
            */
            /*zNodes : [ //树型控件初始化数据对象，模拟的假数据，后期需要从数据库中获取
                {id:1,pId:0,name:'平台系统管理',checked:false},
                {id:102,pId:1,name:'部门管理',checked:false},
                {id:103,pId:1,name:'用户管理',checked:false},
                {id:104,pId:1,name:'角色管理',checked:false},
                {id:105,pId:1,name:'模块管理',checked:false},
                {id:106,pId:1,name:'系统日志管理',checked:false},
                {id:2,pId:0,name:'题库管理',checked:false},
                {id:201,pId:2,name:'题目学科管理',checked:false},
                {id:202,pId:2,name:'题目类型管理',checked:false},
                {id:203,pId:2,name:'题目管理',checked:false},
                {id:204,pId:2,name:'题目审核日志',checked:false},
                {id:205,pId:2,name:'企业管理',checked:false},
                {id:3,pId:0,name:'会员管理',checked:false},
                {id:301,pId:3,name:'会员账号管理',checked:false},
                {id:302,pId:3,name:'会员答题管理',checked:false}
            ]*/
            zNodes:[]
        },
        created(){
            //不适合初始化树型控件，时间早了，所以在mounted()方法中做。
        },
        mounted(){
            //根据roleId查询角色信息
            this.findRole();
            //调用初始化树型控件方法
            this.initZTreeData();

        },
        methods:{
            //获取角色信息的方法
            findRole(){

            },
            //初始化树型控件方法
            initZTreeData(){

            },
            //初始化zTree树型控件的方法
            initZTree(){
                this.zTreeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes)
                let zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
                this.zTreeObj.expandAll(true);//true：展开所有
            },
            //保存事件调用的方法：保存角色的权限
            submitCheckedNodes(){
                //1 获取勾选的所有模块的id值，保存到数组中
                //1.1 获取所有的勾选权限节点
                var nodes = this.zTreeObj.getCheckedNodes(true);//true:被勾选，false：未被勾选
                //2.2 循环nodes，获取每个节点的id，并将数据加入moduleIds数组
                var moduleIds = [];
                for(var i=0;i<nodes.length;i++) {
                    moduleIds.push(nodes[i].id);
                }
                //2.发送异步请求,将roleId和moduleIds数组发送给服务器
            }
        }
    });
</script>
</body>
</html>